<template>
  <view class="container">
 <view class="sidebar-nav">
      <view v-for="(item, index) in List" :key="index" class="nav-item">
        <text>{{ item.name }}</text>
      </view>
    </view>
    <!-- 内容区域 -->
    <view class="content">
      <input type="text" placeholder="输入商品名称">
      <view v-if="storeData.length > 0" class="store-item">
        <view class="store-left">
          <image :src="storeData[0].imgUrl" class="store-logo"></image>
        </view>
        <view class="store-right">
          <text class="store-name">{{ storeData[0].name }}</text>
          <view class="store-details">
            <text class="gray-text">月售: {{ storeData[0].sales}} 起送: {{ storeData[0].expressLimit}} 基础运费: {{ storeData[0].expressPrice }}</text>
            <text class="red-text">{{ storeData[0].slogan}}</text>
          </view>
        </view>
      </view>
    </view>
       <!-- 侧边导航栏 -->
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      storeData: [],
      List: [
        {
          name: "全部商品",
          all: []
        },
        {
          name: "秒杀商品",
          kill: []
        },
        {
          name: "新鲜水果",
          fruit: []
        }
      ]
    };
  },
  onLoad: function (options) {
    const Id = options.id;
    uni.request({
      url: `http://localhost:3000/data?id=${Id}`,
      method: 'GET',
      success: (res) => {
        this.storeData = res.data;
      },
      fail: (err) => {
        console.error('请求失败', err);
      }
    });
  }
};
function handleError(error) {
    if (error instanceof Error) {
        console.error('错误信息:', error.message);
        console.error('错误堆栈:', error.stack);
    } else {
        console.error('未知错误:', JSON.stringify(error));
    }
}
</script>

<style>
.container {
  display: flex;
  width: auto;
  height: 901px;
  background-color: #f5f5f5;
}

.sidebar-nav {
  width: 120px;
  background-color: #e0e0e0;
  padding: 15px 0;
  display: flex;
  flex-direction: column; /* 使导航项纵向排列 */
 
}

.nav-item {
  padding: 10px 15px;
  cursor: pointer;
  text-align: center;
}

.nav-item:hover {
  background-color: #d0d0d0;
}

.content {
  flex: 1;
  padding: 15px;
}

.store-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.store-left {
  margin-right: 15px;
}

.store-logo {
  width: 70px;
  height: 70px;
}

.store-right {
  flex: 1;
}

.store-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.store-details {
  font-size: 14px;
  line-height: 1.4;
}

.gray-text {
  color: #666;
}

.red-text {
  color: #FF5722;
}

input {
  background-color: #d3d3d3;
  border-radius: 20px;
  width: auto;
  margin-bottom: 5px;
  padding: 10px;
}
</style>